<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/clearfix.css">

    <style>
        .buttons-tab .button.active{
            color:#e7223c;
            border-color:#e7223c;
        }
        .bar-tab .tab-item.active, .bar-tab .tab-item:active{
            color:#e7223c;
        }
        .list-block{
            margin: .5rem 0 70px 0;
        }
        .infinite-scroll-preloader {
            margin-top:-5rem;
        }
    </style>
</head>
<body>
<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
<div class="page-group">
    <!-- 单个page ,第一个.page默认被展示-->
    <div class="page page-current" id='router'>
        <!-- 标题栏 -->
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left "></a>
            <h1 class="title">爱享健康</h1>
            <a class="icon-word pull-right">完成</a>
        </header>
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div class="img-container">
                <img src="./img/banner.png" alt=""/>
            </div>
            <div class="buttons-tab">
                <a href="#tab1" class="tab-link active button">全部列表</a>
                <a href="#tab2" class="tab-link button">就医转诊</a>
            </div>

            <div class="tabs">
                <div id="tab1" class="tab active infinite-scroll page-infinite-scroll-bottom">
                    <div class="list-block">
                        <ul class="list-container">
                        </ul>
                    </div>
                    <!-- 加载提示符 -->
                    <div class="infinite-scroll-preloader">
                        <div class="preloader">
                        </div>
                    </div>
                </div>
                <div id="tab2" class="tab infinite-scroll page-infinite-scroll-bottom">
                    <div class="list-block">
                        <ul class="list-container">
                            <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                            <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                            <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                            <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                            <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                            <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                            <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                            <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                            <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                            <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                            <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                            <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                        </ul>
                    </div>
                    <!-- 加载提示符 -->
                    <div class="infinite-scroll-preloader">
                        <div class="preloader">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <nav class="bar bar-tab">
            <a class="tab-item external active" href="#">
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item external" href="#" id="service">
                <span class="tab-label">服务</span>
            </a>
            <a class="tab-item external" href="#">
                <span class="tab-label">订单</span>
            </a>
            <a class="tab-item external" href="#">
                <span class="tab-label">我</span>
            </a>
        </nav>
    </div>
    <!-- 其他的单个page内联页（如果有） -->
    <!--<div class="page">...</div>-->
</div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<!--<script type='text/javascript' src='static/seajs-3.0.0/dist/sea.js' charset='utf-8'></script>-->
<script src="static/require/require.js" data-main="dist/scripts/main"></script>
<script type="text/javascript" src="dist/scripts/home/home.js"></script>
<script type="text/javascript" src="dist/scripts/home/index.js"></script>
<script>
//    seajs.config({
//        alias: {
//            "zepto": "zepto.js"
//        }
//    })
</script>
<script>
    //sea.js打包后在/pages/paystatus会报错

//    $(function () {
//        //可采用js控制路由跳转，实现优先加载数据
//        /**
//         * 集成无限滚动功能，每次加载的数据以及最大的数目可以手动控制，以后数据过多可考虑采用无限滚动功能
//         */
//        var htmlContent = dataSource.allListHtml();
//        $('#tab1').find('.list-block')[0].innerHTML = htmlContent;
//        $(document).on("pageInit","#router2",function (e, pageId, $page) {
//            seajs.use('./js/home/details',function (details) {
//                details.loadData();
//                details.sweetAlert();
//            })
//        });
//        $(document).on("pageInit", function(e,id,page) {
//            //多个标签页下的无限滚动
//            var loading = false;
//            // 每次加载添加多少条目
//            var itemsPerLoad = 4;
//            // 最多可加载的条目
//            var maxItems = 0;
//            var lastIndex = $('.list-container li')[0]?$('.list-container li')[0].length:0;
//            function addItems(number, lastIndex) {
//                // 生成新条目的HTML
//                var html = '';
//                for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
//                    html += '<li class="item-content" onClick="alert(1)"><div class="item-inner"><div class="item-title">新条目</div></div></li>';
//                }
//                // 添加新条目
//                $('.infinite-scroll.active .list-container').append(html);
//            }
//            $(page).on('infinite', function() {
//                // 如果正在加载，则退出
//                if (loading) return;
//                // 设置flag
//                loading = true;
//                var tabIndex = 0;
//                if($(this).find('.infinite-scroll.active').attr('id') == "tab1"){
//                    tabIndex = 0;
//                }
//                if($(this).find('.infinite-scroll.active').attr('id') == "tab2"){
//                    tabIndex = 1;
//                }
//                lastIndex = $('.list-container').eq(tabIndex).find('li').length;
//                // 模拟1s的加载过程
//                setTimeout(function() {
//                    // 重置加载flag
//                    loading = false;
//                    if (lastIndex >= maxItems) {
//                        // 加载完毕，则注销无限加载事件，以防不必要的加载:$.detachInfiniteScroll($('.infinite-scroll').eq(tabIndex));多个无线滚动请自行根据自己代码逻辑判断注销时机
//                        // 删除加载提示符
//
//                        $('.infinite-scroll-preloader').eq(tabIndex).hide();
//                        return;
//                    }
//                    addItems(itemsPerLoad,lastIndex);
//                    // 更新最后加载的序号
//                    lastIndex =  $('.list-container').eq(tabIndex).find('li').length;
//                    $.refreshScroller();
//                }, 1000);
//            });
//        });
//        $.init();
//    });
</script>
</body>
</html>